<template>
    <div class="com_box pd_20">
        <EditFreeModel ref="editRef" @getChildData="getChildData" />
        <div class="flexbox flexcenter flexbetween time_head">
            <el-popover placement="bottom-start" width="380" v-model="is_model">
                <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <img src="../../assets/img/model_icon.svg" alt="" class="select_icon">
                        <span class="select_text">{{hasCheck.template_name?hasCheck.template_name:'请选择模板'}}</span>
                    </div>
                    <span class="el-icon-caret-bottom"></span>
                </div>
                <div class="time_model">
                    <span class="tm_title font_16 color_01">模板</span>
                    <div class="yusuan_list">
                        <div class="yusuan_item flexbox flexcenter flexbetween" @click="selectModel(item,index)" :class="{'active':item.template_id==hasCheck.template_id}" v-for="(item,index) in modelList" :key="index">
                            <img src="../../assets/img/market_checked.svg" alt="" class="ys_check">
                            <div class="font_14 color_01">{{item.template_name}}</div>
                            <div class="yusuan_edit flexbox flexcenter">
                                <span class="icon_btn" @click.stop="editModel(item)"><img src="../../assets/img/edit_icon.svg" alt=""></span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-popover>
            <div>
                <el-date-picker v-model="queryInfo.date" @change="selectDaty" :clearable="false" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-button type="primary" size="small" style="margin-left:12px" @click="downloadFile">
                    <div class="flexbox flexcenter flexjust">
                        <svg width="16" height="16" viewBox="0 0 16 16" stroke='white' class="btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M4 6L8 2L12 6" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M4 6L8 2L12 6" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        导出数据
                    </div>
                </el-button>
            </div>
        </div>
        <div class="free_title">数据趋势</div>
        <div class="free_rank">
            <div class="free_list flexbox ">
                <div class="free_name flexbox flexcenter">
                    <img src="../../assets/img/free_icon4.png" alt="" class="free_icon">
                </div>
                <div class="free_box flexbox flexcenter flex">
                    <template v-for="(item,index) in dataList">
                        <div class="free_item flexbox flexcenter" :class="{'active':item.checked==true}" :key="index" v-if="index>13" @click="selectType(index,item)">
                            {{item.title}}
                        </div>
                    </template>
                </div>
            </div>
            <div class="free_list flexbox ">
                <div class="free_name">
                    <img src="../../assets/img/free_icon1.png" alt="" class="free_icon">
                </div>
                <div class="free_box flexbox flexcenter flex">
                    <template v-for="(item,index) in dataList">
                        <div class="free_item flexbox flexcenter" :class="{'active':item.checked==true}" :key="index" v-if="index<3" @click="selectType(index,item)">
                            {{item.title}}
                            <el-tooltip :content="item.tips" placement="top">
                                <svg class="help_icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 9.00002 15.7C5.29971 15.7 2.30002 12.7004 2.30002 9.00005C2.30002 5.29974 5.29971 2.30005 9.00002 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </div>
                    </template>
                </div>
            </div>
            <div class="free_list flexbox ">
                <div class="free_name flexbox flexcenter">
                    <img src="../../assets/img/free_icon2.png" alt="" class="free_icon">
                    <el-tooltip content="数据来源于全店" placement="top">
                        <svg width="18" height="18" viewBox="0 0 18 18" class="free_help" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 9.00002 15.7C5.29971 15.7 2.30002 12.7004 2.30002 9.00005C2.30002 5.29974 5.29971 2.30005 9.00002 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                            <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                        </svg>
                    </el-tooltip>
                </div>
                <div class="free_box flexbox flexcenter flex">
                    <template v-for="(item,index) in dataList">
                        <div class="free_item flexbox flexcenter" :class="{'active':item.checked==true}" :key="index" v-if="index>2 && index<6" @click="selectType(index,item)">
                            {{item.title}}
                        </div>
                    </template>
                </div>
            </div>           
            <div class="free_list flexbox ">
                <div class="free_name flexbox flexcenter">
                    <img src="../../assets/img/free_icon3.png" alt="" class="free_icon">
                    <el-tooltip content="数据来源于单品" placement="top">
                        <svg width="18" height="18" viewBox="0 0 18 18" class="free_help" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 9.00002 15.7C5.29971 15.7 2.30002 12.7004 2.30002 9.00005C2.30002 5.29974 5.29971 2.30005 9.00002 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                            <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                        </svg>
                    </el-tooltip>
                </div>
                <div class="free_box flexbox flexcenter flex">
                    <template v-for="(item,index) in dataList">
                        <div class="free_item flexbox flexcenter" :class="{'active':item.checked==true}" :key="index" v-if="index>5&&index<14" @click="selectType(index,item)">
                            {{item.title}}
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div class="data_chart" v-if="queryInfo.template_id">
            <div id="timeChart" style="height:600px;" ref="echarts"></div>
        </div>
        <div v-else class="flexbox flexcenter flexcolumn flexjust" style="height:600px">
            <img src="../../assets/img/null_icon.svg" alt="">
            <div class="font_13 color_03">请先选择模板</div>
        </div>
    </div>
</template>

<script>
import EditFreeModel from "./EditFreeModel";
import downLoad from "../../excel/ExportDown";
export default {
    name: "",
    data() {
        return {
            loading: true,
            is_model: false,
            modelList: [],
            hasCheck: {},
            queryInfo: {
                template_id: "",
                date: "",
            },
            x_data: [],
            hasSelect: [],
            allData: [],
            dataList: [
                {
                    title: "消耗",
                    checked: false,
                    name: "cost",
                    tips: "该数据来源于模板中已选择的视频。",
                    value: [],
                    type:"抖加-消耗"
                },
                {
                    title: "转化量",
                    checked: false,
                    name: "convert_cnt",
                    tips: "该数据来源于模板中已选择的视频。",
                    value: [],
                    type:"抖加-转化量"
                },
                {
                    title: "播放量",
                    checked: false,
                    name: "video_play_cnt",
                    tips: "该数据来源于模板中已选择的视频。",
                    value: [],
                    type:"抖加-播放量"
                },
                {
                    title: "成交件数",
                    checked: false,
                    name: "pay_combo_cnt",
                    tips: "成交件数",
                    value: [],
                    type:"抖店-成交件数"
                },
                {
                    title: "抖店成交",
                    checked: false,
                    name: "pay_gmv",
                    tips: "抖店成交",
                    value: [],
                    type:"抖店-抖店成交"
                },
                {
                    title: "商品点击人数",
                    checked: false,
                    name: "product_click_ucnt",
                    tips: "商品点击人数",
                    value: [],
                    type:"抖店-商品点击人数"
                },
                {
                    title: "商品访客",
                    checked: false,
                    name: "item_uv",
                    tips: "商品访客",
                    value: [],
                    type:"生意参谋-商品访客"
                },
                {
                    title: "加购人数",
                    checked: false,
                    name: "item_cart_cnt",
                    tips: "加购人数",
                    value: [],
                    type:"生意参谋-加购人数"
                },
                {
                    title: "支付买家数",
                    checked: false,
                    name: "pay_byr_cnt",
                    tips: "支付买家数",
                    value: [],
                    type:"生意参谋-支付买家数"
                },
                {
                    title: "天猫成交",
                    checked: false,
                    name: "pay_amt",
                    tips: "天猫成交",
                    value: [],
                    type:"生意参谋-天猫成交"
                },
                {
                    title: "直通车流量",
                    checked: false,
                    name: "direct_car_uv",
                    tips: "直通车流量",
                    value: [],
                    type:"生意参谋-直通车流量"
                },
                {
                    title: "购物车流量",
                    checked: false,
                    name: "shop_car_uv",
                    tips: "购物车流量",
                    value: [],
                    type:"生意参谋-购物车流量"
                },
                {
                    title: "手淘搜索流量",
                    checked: false,
                    name: "search_uv",
                    tips: "手淘搜索流量",
                    value: [],
                    type:"生意参谋-手淘搜索流量"
                },
                {
                    title: "品销宝流量",
                    checked: false,
                    name: "brand_sales_uv",
                    tips: "品销宝流量",
                    value: [],
                    type:"生意参谋-品销宝流量"
                },
                {
                    title: "消耗",
                    checked: false,
                    name: "stat_cost",
                    tips: "消耗",
                    value: [],
                    type:"小红书-消耗"
                },
                {
                    title: "展示数",
                    checked: false,
                    name: "show_cnt",
                    tips: "展示数",
                    value: [],
                    type:"小红书-展示数"
                },
                {
                    title: "点击数",
                    checked: false,
                    name: "click_cnt",
                    tips: "点击数",
                    value: [],
                    type:"小红书-点击数"
                },
                {
                    title: "点击率",
                    checked: false,
                    name: "ctr",
                    tips: "点击率",
                    value: [],
                    type:"小红书-点击率"
                },  
                {
                    title: "平均点击成本",
                    checked: false,
                    name: "acp",
                    tips: "平均点击成本",
                    value: [],
                    type:"小红书-平均点击成本"
                },  
            ],
        };
    },
    created() {
        this.queryInfo.date = this.formatNowDate();
        this.getModelList();
        let sessionForm = JSON.parse(
            window.sessionStorage.getItem("freeQuery")
        );
        if (sessionForm) {
            this.hasCheck = sessionForm.hasCheck;
            this.queryInfo = sessionForm.queryInfo;
            this.dataList = this.arrRepeat(sessionForm.dataList,this.dataList)
            this.hasSelect = sessionForm.hasSelect;
            this.getDataList();
        }
    },
    beforeDestroy() {
        window.sessionStorage.removeItem("freeQuery");
    },
    mounted() {},
    methods: {
        // 数组去重
        arrRepeat(old,news){
            let k = {}
            let arr = [...old,...news]
            let newsArr = []
            newsArr = arr.reduce(function(cur,next){
                k[next.name]?"":k[next.name] = true && cur.push(next)
                return cur
            },[])
            return newsArr
        },
        formatNowDate() {
            let date = new Date();
            var myyear = date.getFullYear();
            var mymonth =
                date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1;
            var myweekday =
                date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            let day_start = myyear + "-" + mymonth + "-" + myweekday;
            return day_start;
        },

        //获取模板列表
        async getModelList() {
            const { data: res } = await this.$http.post(
                "adminapi/randompush/templateList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.modelList = res.data;
            }
        },

        // 时间曲线数据图表
        timeChart() {
            let num = this.dataList.filter((item) => {
                return item.checked == true;
            });
            this.hasSelect = num;
            let series = [];
            this.hasSelect.forEach((item) => {
                series.push({
                    smooth: true,
                    showSymbol: false,
                    name: item.type,
                    type: "line",
                    data: item.value,
                    lineStyle: {
                        width: 3,
                    },
                });
            });
            var option = {
                title: {},
                color: ["#4475FF", "#36D39A", "#FFC37D", "#00AEB9", "#FF7A7A"],
                legend: {
                    selectedMode: false,
                    itemHeight: 4,
                    icon: "rect",
                    data: series.map((item) => {
                        return item.name;
                    }),
                },
                grid: {
                    left: "2%",
                    right: "2%",
                    bottom: "5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisTick: {
                        show: false,
                    },
                    data: this.x_data,
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "rgba(97, 108, 133, 0.2)",
                        },
                    },
                },
                series: series,
            };
            const myChart = this.$echarts.init(
                document.getElementById("timeChart")
            );
            myChart.setOption(option, true);
            window.onresize = function () {
                myChart.resize();
            };
            this.sesstionData();
        },

        // 设置模板
        editModel(item) {
            this.$refs.editRef.dialogVisible = true;
            this.$refs.editRef.queryInfo.template_id = item.template_id;
            this.$refs.editRef.title = item.template_name;
            this.$refs.editRef.getUserList(item.template_id);
            this.$refs.editRef.getHasList(item.template_id);
        },

        // 选择模板
        selectModel(item) {
            this.hasCheck = item;
            this.queryInfo.template_id = item.template_id;
            this.is_model = false;
            this.getDataList();
        },

        // 选择日期
        selectDaty() {
            this.getDataList();
        },

        //获取图表数据
        async getDataList() {
            const { data: res } = await this.$http.post(
                "adminapi/randompush/dataTrend",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.allData = res.data.list;
                for (let i in this.dataList) {
                    this.dataList[i].value = res.data.list.map((item) => {
                        return item[this.dataList[i].name]
                            ? item[this.dataList[i].name]
                            : 0;
                    });
                }
                this.x_data = res.data.list.map((item) => {
                    return this.splitData(item.segmentation_time);
                });
                if (this.hasSelect.length == 0) {
                    let data = this.dataList.slice(0, 5).map((item) => {
                        item.checked = true;
                        return item;
                    });
                    this.hasSelect = data;
                }
                this.timeChart();
            }
        },

        // 导出数据
        downloadFile() {
            let list = [];
            this.allData.map((d) => {
                Object.keys(d).forEach((k) => (d[k] = d[k] || "0"));
                list.push(d);
            });
            let headData = this.hasSelect.map((item) => {
                return item.type;
            });
            let valueData = this.hasSelect.map((item) => {
                return item.name;
            });
            headData.unshift("时段");
            valueData.unshift("segmentation_time");
            var excelDatas = [
                {
                    tHeader: headData,
                    filterVal: valueData,
                    tableDatas: list,
                    sheetName: "Dou+数据",
                },
            ];
            downLoad(excelDatas, "Dou+数据");
        },

        // 数据缓存
        sesstionData() {
            let sessionForm = {
                hasCheck: this.hasCheck,
                queryInfo: this.queryInfo,
                dataList: this.dataList,
                hasSelect: this.hasSelect,
            };
            window.sessionStorage.setItem(
                "freeQuery",
                JSON.stringify(sessionForm)
            );
        },

        getChildData() {
            if (this.queryInfo.template_id) {
                this.getDataList();
            }
        },

        // 日期切割
        splitData(date) {
            let arr = date.split(" ");
            let time = arr[1].split(":");
            let text = time[0] + ":" + time[1];
            return text;
        },

        // 选择趋势
        selectType(index, item) {
            if (!this.hasCheck.template_id) {
                this.$message.error("请先选择模板！");
                return;
            }
            if (!this.dataList[index].checked && this.hasSelect.length == 5) {
                this.$message.error("最多只能选择5个！");
                return;
            }
            this.dataList[index].checked = !this.dataList[index].checked;
            this.timeChart();
        },
    },
    components: {
        EditFreeModel,
    },
};
</script>


<style scoped>
.time_head {
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 20px;
}
.select_icon {
    margin-right: 10px;
}
.select_box {
    width: 260px;
}
.free_title {
    font-size: 16px;
    color: #17233d;
    line-height: 22px;
    position: relative;
    font-weight: bold;
    padding: 20px 0;
}
.free_rank {
    padding: 20px 20px 4px 20px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
}

.free_name {
    width: 115px;
    margin-top: 8px;
    height: 20px;
}

.free_icon {
    height: 20px;
}
.free_box {
    margin-left: 4px;
    flex-wrap: wrap;
}
.free_help {
    cursor: pointer;
    width: 18px;
    height: 18px;
    margin-left: 5px;
}
.free_item {
    margin-left: 16px;
    font-size: 14px;
    color: #616c85;
    height: 36px;
    padding: 0 12px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 16px;
}
.free_item.active,
.free_item:hover {
    background: rgba(68, 117, 255, 0.05);
    color: #4475ff;
}
.free_item svg {
    margin-left: 10px;
}

.data_chart {
    margin-top: 40px;
}
</style>

